<template>
	<view class="announcement">
		<view style="height: 160rpx;">
			<view class="mail_List" style="position: fixed;z-index: 99;">
				<view class="mail gradient" style="font-weight: 700;">
					<view class="order">通知公告详情</view>
				</view>
			</view>
			<view class="icon" style="position: fixed;z-index: 99;">
				<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
			</view>
<!-- 			<view class="plus_circle">
				<u-icon name="plus-circle" size="120"></u-icon>
			</view> -->
		</view>
		<view class="second_card">
			<u-cell-group :border="false">
				<u-cell-item title="一、标题:" hover-class="none" :value="particulars.activityTitle"
					:value-style="{'color':'#000','font-weight':'600'}" :arrow="false">
				</u-cell-item>
<!-- 				<u-cell-item title="发布时间:" hover-class="none" value="2021-06-09 9: 10: 00"
					:value-style="{'color':'#000','font-weight':'600'}" :arrow="false"></u-cell-item>
				<u-cell-item title="发布人:" hover-class="none" value="刘邦"
					:value-style="{'color':'#000','font-weight':'600'}" :arrow="false"></u-cell-item>
				<u-cell-item title="二、活动主题:" hover-class="none" value="送真情服务，建和谐社区"
					:value-style="{'color':'#000','font-weight':'600'}" :arrow="false">
				</u-cell-item>
				<u-cell-item title="三、活动时间:" hover-class="none" label="2021-06-16 08: 00 至 2021-06-16 17: 00"
					:label-style="{'color':'#000','font-weight':'600','text-align':'right','width':'682rpx'}"
					:arrow="false">
				</u-cell-item>
				<u-cell-item title="四、活动地址:" hover-class="none" value="旭辉·湖山原著"
					:value-style="{'color':'#000','font-weight':'600'}" :arrow="false">
				</u-cell-item> -->
				<u-cell-item title="五、活动内容:" hover-class="none" :border-bottom="false" :arrow="false"></u-cell-item>
				<view class="" style="padding: 0 24rpx 0 40rpx;" v-html="content">
					<!-- 此次活动我们将联系蜀山区社区协助进行，主要通过一些有意义的服务活动来为社区建设做出自己的一点贡献。活动每个星期进行一次，采用系列活动和长期活动相结合我形式，把社区急要而又欠缺的知识和一些公益服务送到社区。通过互动和互助形式，帮助社区中有困难的住户,建立“—对一“的互帮互教活动。<br />同时，着重关注社区中的老人和小孩，并通过家访的形式与社区区民进行友好的交流，为老人送去慰问和欢乐，为小孩送去知识和爱心。共同构建”团结、互助、丰富“的社区文化。 -->
				</view>
				
				
<!-- 				<view class="" style="padding: 0 24rpx 0 40rpx;">
				<rich-text :nodes="particulars.content" ></rich-text>
					
				</view> -->
<!-- 				<view class="physical">
					<text style="margin-left: 20rpx;">(—)、活动具体形式：</text>
					<view class="">1、绿化、卫生:进行植绿护绿活动;进行社区清洁大扫除和花草树木的修剪与浇水;为孤寡老人或空巢老人打扫房间等</view>
				</view>
				<view class="physical">
					2：尊老爱幼:组织一些能说会道的志愿者与孤寡或空巢老人进行“倍聊”，来了解他们的内心世界，聆听他们的心声，同时可以建立“—对一“方式，经常保持与老人的联系，及时了解他们的现状可以根据需要成立”夕阳红“服务队,为社区老人提供长期的服务;在社区幼儿园开展有利于小朋友健康成长的活动，来丰富幼儿园的文化生活。
				</view>
				<view class="physical">
					3：义务家教与扶助:通过“—对一”的结对子关系来帮助社区中有需要但经济条件有限的户主的小孩进行长期义务辅导。同时针对那些生活困难的家庭子女，我们将在全校范围内和社会上进行捐款行动,来帮助他们顺利完成学业。
				</view>
				<view class="physical">
					4：文娱汇演:通过在社区里表演同学自创的文艺活动，来丰富社区的文化，同时举行趣味活动，达到娱乐和健身的双重目的(如羽毛球比赛，棋牌比赛等),同时又能展现当代大学生的精神风貌。
				</view>
				<view class="physical">
					5：宣传、咨询:通过海报和现场讲解（条件允许可以请一些专家)形式来解答和宣传一些社区区民常识〔如消费者维权、科普知识和网络知识科普文化、卫生保健知识等)同时可以根据需要，为区民的生活提供小咨询，组织开展青少年德育知识教育等
				</view>
				<view class="physical">
					6：关注留守儿童和单亲小孩:针对社区中的留守儿童或单亲小孩，我们将为他们提供丰富的周末活动(拟订为根据条件需要带他们到温江的一些旅游景点去参观;“我的大学生活的一天"带他们到学校进行参观，到寝室与同学交流，上读书馆阅览图书等校园活动)
				</view>
				<view class="physical">
					7：组织有关人员对社区的周围环境进行勘察，进行总结和预测，为居民生活提供衣食住上的建议。对社区公共设施等进行分析，为社区建设提供建议，方便居民生活。
				</view>
				<view class="physical" style="padding: 40rpx 24rpx 20rpx 40rpx; border-bottom: 1px solid #f6f7f9;">
					8：其他内容，如有关的家电检修，电脑维护和有关的就业信息的咨询等
				</view>
				<u-cell-item title="六、活动要求:" hover-class="none" :border-bottom="false" :arrow="false"></u-cell-item>
				<view style="padding: 0 24rpx 0 40rpx; text-indent: 0.8em;">
					(—)要求参与者具有端正的态度和强烈的社会责任感,活动中能够积极、认真负责。
				</view>
				<view class="physical" style="text-indent: 0.8em;">
					(二)要求整个活动做到安排合理，内容充实，活动结果对推动社区建设具有积极的作用。
				</view>
				<view class="physical" style="text-indent: 0.8em;">
					(三)活动过程要求每个参与者注意自身的安全，同时不能破坏社区的公共设施、影响社区正常的生活起居和日常秩序。
				</view>
				<view class="physical" style="text-indent: 0.8em;">
					(四)活动确实按照学校、学院和社区管理处的有关规定进行。不能出现违反学校的纪律和国家的有关法律、法规。
				</view>
				<view class="physical"
					style="padding: 40rpx 24rpx 20rpx 40rpx; text-indent: 0.8em; border-bottom: 1px solid #f6f7f9;">
					(五)要求对活动及时进行经验总结和信息反馈。
				</view>
				<u-cell-item title="七、活动具体操作:" hover-class="none" :border-bottom="false" :arrow="false"></u-cell-item>
				<view class="" style="padding: 0 24rpx 0 40rpx;">
					<text>第一阶段:</text>
					<view class="">
						1：确定活动的具体时间和活动形式，并积极与学院和社区进行联系和交流。<br />2：开展活动，安排有关的人员对活动的过程进行实时监控有有关的安全防范。<br />3：本次活动结束，组织人员返校。做好活动收尾工作，保持社区日常生活起居的稳定。<br />4：积极准备活动相关的物品和必备手续。
					</view>
				</view>
				<view class="physical">
					<text>第二阶段:</text>
					<view class="">
						1∶组织活动人员到达活动社区，并进行有关事宜的安排。<br />2：进行活动的宣传(海报、校园广播和社区的公告栏等)和活动人员的分工。<br />3：进行本次活动参与者的选拔与相关的培训。
					</view>
				</view>
				<view class="physical">
					<text>第三阶段:</text>
					<view class="">
						1∶及时与社区负责人联系,对本次活动的效果进行了解和调查反馈，总结经验。<br />2∶联系、商讨下次活动的相关事宜。
					</view>
				</view>
				<u-cell-item title="八、活动可行性分析和安全保障措施:" hover-class="none" :border-bottom="false" :arrow="false">
				</u-cell-item>
				<view class="" style="padding: 0 24rpx 0 40rpx;">
					<text style="margin-left: 20rpx;">(一)可行性分析:</text>
					<view class="">
						本次活动的举行顺应党中央关于构建和谐社会的号召，对社区建设有积极的意义。活动得到学院和学校有关领导的支持，并有社区负责人的协助,前期工作安排合理、到位，活动的可操作性强，可行性高。活动的参与人员兴致浓厚，并且均为在校大学生，人员安排合理，有较强的组织能力。本次活动选择在周末进行，时间安排合理。地点选择温江，离学校近，往返方便。
					</view>
				</view>
				<view style="padding: 40rpx 24rpx 20rpx 40rpx; border-bottom: 1px solid #f6f7f9;">
					<text style="margin-left: 20rpx;">(二)安全保障措施</text>
					<view class="">
						本次活动我们安排在周末进行，地点蜀山城区。由于地点近，往返方便，活动可行性高。本次活动进行的社区治安状况良好,不会出现抢劫和殴打情况。这些地区的交通状况良好，乘车方便。我们将以公交车为主要的交通工具,并保证不会出现事故。针对本次活动,我们将组织有关的人员学习一些自身的安全防范措施和社区的有关安全管理条例,以确保整个活动的安全，顺利进行。
					</view>
				</view> -->
<!-- 				<u-cell-item title="阅读次数:" hover-class="none" value="543次"
					:value-style="{'color':'#000','font-weight':'600'}" :arrow="false">
				</u-cell-item>
				<u-cell-item title="参加人数:" hover-class="none" value="127人"
					:value-style="{'color':'#000','font-weight':'600'}" :arrow="false">
				</u-cell-item> -->
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityDetails:'',
				particulars:'',
				content:''
			}
		},
		onLoad(activityId) {
			console.log(activityId)
			if(activityId) {
				this.activityDetails=activityId.activityId
				// 社区活动详情
				this.Details()
			}
		},
		methods: {
			// 社区活动详情
			Details() {
				this.$http.get('ScActivity/getScActivityById', {
					activityId:this.activityDetails
				}).then(res => {
					console.log(res, '社区活动详情')
					this.particulars = res.data
					
					this.content=res.data.content.replace(/\<img/gi,'<img style="max-width:100%;"');
					
					// this.content= res.data.content.replace(/\<img/gi, '<img class="richImg"');
					
					// this.particulars=res.data
				})
			},
			noticeDetails() {
				this.openUrl('/pages/application/announcement/noticeDetails/noticeDetails')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.announcement {
		.mail_List {

			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				height: 160rpx;
				line-height: 230rpx;
				color: #fff;
				font-size: 40rpx;
				background-color: #2a4f65;
			}

			.order {
				text-align: center;
			}
		}

		.icon {
			position: absolute;
			top: 96rpx;
			left: 20rpx;
		}

		.icon_two {
			position: absolute;
			top: 18rpx;
			right: 20rpx;
		}

		/deep/.second_card {

			.uni-card {
				z-index: unset;
				margin: 24rpx 0;
			}

			/deep/.u-cell__value {
				margin-right: -18rpx;
			}

			u-cell-item {
				.u-cell {
					padding: 14rpx 24rpx 14rpx 40rpx;
				}
			}

			// u-cell-item:nth-child(2) {
			// 	.u-cell {
			// 		padding: 14rpx 24rpx 14rpx 95rpx;
			// 	}
			// }

			// u-cell-item:nth-child(3) {
			// 	.u-cell {
			// 		padding: 14rpx 24rpx 14rpx 95rpx;
			// 	}
			// }

			.uni-card__content {
				padding: 0 10rpx !important;
			}

			.physical {
				padding: 40rpx 24rpx 0 40rpx;
			}

			.requirements {
				padding: 40rpx 24rpx 0 60rpx;
			}
			// rich-text .richImg {
			// 	width: 100%;
			// 	// height: auto;
			// }
			  

		}
	}
	 
</style>




<style scoped>
	
	
	  ::v-deep img{
			max-width: 100% !important; 
		}
</style>